<template>
  <el-row class="tac">
    <el-col :span="25">
      <el-row style="color:cornsilk; text-align:center;background:#245c64;height:55px;line-height: 55px;
      margin-left:3px;">
        <el-icon style="font-size: 42px"><ElementPlus /></el-icon>
        <div class="mb-3 wms-text" v-if="!props.isCollapse">WMS仓储管理</div>
      </el-row>
      
      <!-- <IconTitle :isCollapse="open" /> -->
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        :collapse="props.isCollapse"
        v-for="(item,key) in dataSource"
      >
        <!-- <el-sub-menu :index="key">
          <template #title>
            <el-icon><location /></el-icon>
            <span>{{item.menu_name}}</span>
          </template>

          
          <el-sub-menu v-if="item.menu_level ==0"  v-for="(childItem,key) in item.childItem" >
            <template #title>{{childItem.menu_name}}</template>
            <el-menu-item index="1-4-1">{{childItem.menu_name}}</el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else index="4">
            <span>Navigator Four</span>
          </el-menu-item>
        </el-sub-menu> -->

        <SideMenu :data="item" :index ="String(key)" @go="go" width="200px"/>
        <!-- <el-sub-menu index="1">
          <template #title>
            <el-icon><location /></el-icon>
            <span>Navigator One</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <div>
              <el-menu-item index="1-4-1">item one</el-menu-item>

            
            <el-menu-item index="1-4-2">item one2</el-menu-item>
            </div>
            
          </el-sub-menu>
        </el-sub-menu> -->
      </el-menu>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref,reactive,} from "vue";
import { useRouter } from 'vue-router'
import { POSTJSON } from '../utils/http'
import SideMenu from './SideMenu.vue'
import {useWmsGlobal} from '@/store/wmsGlobal'
let menuData = reactive([]);
let dataSource = reactive([])
const wmsGlobal = useWmsGlobal();
const newRouter = [];
// const router = inject("router");
const router = useRouter()
const go = (data)=>{
  router.push(data.url)
}
const findChild = (number)=>{
  const result = []
  menuData.forEach( item =>{
    if(item.parent_number === number){
      result.push(item);
    }
  })
  formatData(result)
  return result;
}

const formatData = (data)=>{
  if(Array.isArray(data)){
    data.forEach((item)=>{
      if(item.parent_number == null){
        item.childItem = findChild(item.serial_number)

        dataSource.push(item)
      }else if(item.parent_number !== null && item.menu_level !==0){
        item.childItem = findChild(item.serial_number)
      }
    })
  }
}
const setRouter = (source)=>{
  menuData.forEach((item)=>{
    if(item.menu_level ===0){
      const modules = import.meta.glob("@/views/**/**.vue")
      // item.url = '/'+item.url.replace(/\./g,'/')
      const obj = {
        path:item.url,
        component: modules[`/src/views${item.url}.vue`],
        name:item.menu_name,
        meta:{
          keep:true
        }
      }
      router.addRoute('/'+item.url,obj)
      // console.log('/'+item.url,obj);
    }
  })
}

POSTJSON('/Menu/MenuPage',{}).then(data=>{
  data.data.forEach(item =>{
    item.url = '/'+item.url.replace(/\./g,'/')
    menuData.push(item)
  });
  formatData(data.data)
  setRouter()
  wmsGlobal.menuData = menuData
  
  
})





const props = defineProps({
  isCollapse: Boolean,
});
const open = ref(false);
const handleOpen = (key, keyPath) => {
  open.value = false;
};
const handleClose = (key, keyPath) => {
  open.value = true;
};
</script>
<style scoped>
.wms-text{
  font-size: 20px;
  font-weight: bold;
}
</style>